<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="setup_change">
      <el-tab-pane label="订单" name="order">
        <div class="ser_div">
          <el-row>
            <!-- <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 订单号</el-col>
            <el-col :span="16">
              <el-input v-model="ser.order_number" type="number"></el-input>
            </el-col>
          </el-row>
        </el-col> -->
            <!-- <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 流水号 </el-col>
            <el-col :span="16">
              <el-input v-model="ser.serial_number"></el-input>
            </el-col>
          </el-row>
        </el-col> -->
            <!-- <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 客户 </el-col>
            <el-col :span="16">
              <el-select
                v-model="ser.customer_id"
                filterable
                placeholder="请选择客户"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in CustomerList"
                  :key="index"
                  :label="item.customer_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col> -->
            <!-- <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 产品 </el-col>
            <el-col :span="16">
              <el-select v-model="ser.product_id" filterable @change="product_id_change" placeholder="请选择产品"
                style="width: 100%">
                <el-option v-for="(item, index) in productList" :key="index" :label="item.product_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col>
          <el-row style="display: flex; align-items: center">
            <el-col :span="8" style="text-align: center"> 型号 </el-col>
            <el-col :span="16">
              <el-select filterable v-model="ser.model_number_id" placeholder="请选择型号" style="width: 100%">
                <el-option v-for="(item, index) in ModelNumberList" :key="index" :label="item.model_number"
                  :value="item.id">
                </el-option>
              </el-select>

            </el-col>
          </el-row>
        </el-col> -->
            <el-col>
              <el-row style="display: flex; align-items: center">
                <el-col :span="8" style="text-align: center"> 仓库 </el-col>
                <el-col :span="16">
                  <el-select
                    v-model="ser.warehouse_id"
                    @change="Warehouse_change"
                    placeholder="请选择仓库"
                  >
                    <el-option
                      v-for="item in WarehouseList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
            <el-col>
              <el-row style="display: flex; align-items: center">
                <el-col :span="8" style="text-align: center"> 货架 </el-col>
                <el-col :span="16">
                  <el-select
                    v-model="ser.goods_shelf_id"
                    placeholder="请选择货架"
                  >
                    <el-option
                      v-for="item in goods_shelfList"
                      :key="item.goods_shelf_id"
                      :label="item.name"
                      :value="item.goods_shelf_id"
                    >
                    </el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
            <el-col>
              <el-row style="display: flex; align-items: center">
                <el-col :span="8" style="text-align: center">
                  订单日期范围
                </el-col>
                <el-col :span="16">
                  <el-date-picker
                    v-model="order_data"
                    @change="order_data_change"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  >
                  </el-date-picker>
                </el-col>
              </el-row>
            </el-col>
            <el-col>
              <el-button
                @click="search(0)"
                class="add_btn"
                icon="el-icon-search"
                >查询</el-button
              >
              <el-button
                @click="searchreset"
                icon="el-icon-refresh"
                class="add_btn"
                >重置</el-button
              >
              <el-button @click="search(2)" icon="el-icon-plus" class="add_btn"
                >导出</el-button
              >
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="dataList"
          v-horizontal-scroll="'always'"
          v-loading="loading"
          style="width: 100%"
          border
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <!-- {{props.row}} -->
              <el-table :data="props.row.order.order_second">
                <el-table-column type="expand">
              <template slot-scope="props_pid">
                <el-table
                  :data="props_pid.row.order_second_pid"
                  v-if="props_pid.row.is_split == 1" 
                >
                  <el-table-column label="产品名称" width="150">
                    <template slot-scope="prop">
                      <span>{{
                        prop.row.product ? prop.row.product.product_name : ""
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="型号" width="150">
                    <template slot-scope="prop">
                      <span>{{
                        prop.row.model_number
                          ? prop.row.model_number.model_number
                          : ""
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="颜色" width="150">
                    <template slot-scope="prop">
                      <span>{{
                        prop.row.color ? prop.row.color.color : ""
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格" width="150">
                    <template slot-scope="prop">
                      <span>{{
                        prop.row.specification
                          ? prop.row.specification.specification
                          : ""
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="尺寸" width="150" prop="work_size">
                  </el-table-column>
                  <el-table-column label="数量" width="150" prop="num">
                  </el-table-column>
                  <el-table-column label="备注" prop="remark">
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
                <el-table-column label="产品" width="150">
                  <template slot-scope="prop_s">
                    <span>{{
                      prop_s.row.product ? prop_s.row.product.product_name : ""
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="型号" width="150">
                  <template slot-scope="prop_s">
                    <span>{{
                      prop_s.row.model_number
                        ? prop_s.row.model_number.model_number
                        : ""
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="颜色" width="150">
                  <template slot-scope="prop_s">
                    <span>{{
                      prop_s.row.color ? prop_s.row.color.color : ""
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="规格" width="150">
                  <template slot-scope="prop_s">
                    <span>{{
                      prop_s.row.specification
                        ? prop_s.row.specification.specification
                        : ""
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="尺寸"
                  width="150"
                  prop="work_size"
                ></el-table-column>
                <el-table-column
                  label="数量"
                  width="150"
                  prop="num"
                ></el-table-column>
                <el-table-column label="备注" width="150" prop="remark">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="60"> </el-table-column>
          <!-- <el-table-column prop="order_id" label="订单ID" width="60">
            <template slot-scope="scope">
              {{ scope.row.order.id }}
            </template>
          </el-table-column> -->
          <el-table-column
            prop="warehouse_entry_time"
            label="入库日期"
            width="100"
          >
            <template slot-scope="scope">
              {{ formatterTime(scope.row.warehouse_entry_time) }}
            </template>
          </el-table-column>
          <el-table-column label="订单日期" width="100">
            <template slot-scope="scope">
              {{ formatterTime(scope.row.order.order_date) }}
            </template>
          </el-table-column>
          <el-table-column label="客户" width="80">
            <template slot-scope="scope">
              {{
                scope.row.order.customer
                  ? scope.row.order.customer.customer_name
                  : ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="业主地址" width="100">
        <template slot-scope="scope">
          {{ scope.row.order.customer_name }}
        </template>
      </el-table-column>
      <el-table-column label="业主电话" width="100">
        <template slot-scope="scope">
          {{ scope.row.order.customer_phone }}
        </template>
      </el-table-column>
          <el-table-column label="订单号" width="100">
            <template slot-scope="scope">
              {{ scope.row.order.order_number }}
            </template>
          </el-table-column>
          <el-table-column label="流水号" width="100">
            <template slot-scope="scope">
              {{ scope.row.order.serial_number }}
            </template>
          </el-table-column>
          <el-table-column prop="receivables" label="应收款" width="80">
            <template slot-scope="scope">
              {{ scope.row.order.receivables }}
            </template>
          </el-table-column>
          <el-table-column prop="received" label="已收款" width="80">
            <template slot-scope="scope">
              {{ scope.row.order.received }}
            </template>
          </el-table-column>
          <el-table-column label="余额" width="80">
            <template slot-scope="scope">
              {{ scope.row.order.owe_price }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="颜色" width="70">
        <template slot-scope="scope">
          {{ scope.row.order.color ? scope.row.order.color.color : "" }}
        </template>
      </el-table-column> -->
          <el-table-column label="备注" width="580">
            <template slot-scope="scope">
              {{ scope.row.order.remark }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                style="margin-right: 10px"
                @click="beihuos(scope.row)"
              >
                转到成品库</el-button
              >
              <el-button
                type="text"
                @click="
                  chengpin_shanchu(scope.row.id, scope.row.order.order_number)
                "
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            @prev-click="prev"
            @next-click="next"
            :current-page.sync="pagination.page"
            :page-size="pagination.per_page"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="产品" name="product">
        <el-table
          :data="SemiFPList"
          v-horizontal-scroll="'always'"
          v-loading="loading"
          style="width: 100%"
          border
        >
          <el-table-column label="产品">
            <template slot-scope="prop_s">
              <span>{{
                prop_s.row.product ? prop_s.row.product.product_name : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="型号">
            <template slot-scope="prop_s">
              <span>{{
                prop_s.row.model_number
                  ? prop_s.row.model_number.model_number
                  : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="颜色">
            <template slot-scope="prop_s">
              <span>{{ prop_s.row.color ? prop_s.row.color.color : "" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="规格">
            <template slot-scope="prop_s">
              <span>{{
                prop_s.row.specification
                  ? prop_s.row.specification.specification
                  : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="尺寸" prop="work_size"></el-table-column>
          <el-table-column label="数量" prop="order_count"></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange_product"
            @current-change="handleCurrentChange_product"
            background
            @prev-click="prev_product"
            @next-click="next_product"
            :current-page.sync="pagination_product.page"
            :page-size="pagination_product.per_page"
            layout="total, prev, pager, next"
            :total="total_product"
          >
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      title="转到成品"
      :visible.sync="isbeihuo"
      width="25%"
      :close-on-click-modal="false"
      @close="close_dialog"
    >
      <div>
        <el-row style="display: flex; align-items: center">
          <el-col :span="5">客户 </el-col>
          <el-col :span="20">
            <el-select
              v-model="cangku.customer_id"
              filterable
              placeholder="请选择客户"
            >
              <el-option
                v-for="(item, index) in CustomerList"
                :key="index"
                :label="item.customer_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="display: flex; align-items: center; margin-top: 15px">
          <el-col :span="5">仓库 </el-col>
          <el-col :span="20">
            <el-select
              v-model="cangku.warehouse_id"
              @change="Warehouse_change"
              placeholder="请选择仓库"
            >
              <el-option
                v-for="item in WarehouseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="display: flex; align-items: center; margin-top: 15px">
          <el-col :span="5">货架 </el-col>
          <el-col :span="20">
            <el-select v-model="cangku.goods_shelf_id" placeholder="请选择货架">
              <el-option
                v-for="item in goods_shelfList"
                :key="item.goods_shelf_id"
                :label="item.name"
                :value="item.goods_shelf_id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <!-- <el-row style="display: flex; align-items: center; margin-top: 15px">
          <el-col :span="5">仓位 </el-col>
          <el-col :span="20">
            <el-select
              v-model="cangku.warehouse_location_id"
              placeholder="请选择仓位"
            >
              <el-option
                v-for="item in cangwei_List"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isbeihuo = false" style="margin-right: 15px"
          >取消</el-button
        >
        <el-button @click="push_sets">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStockUpList,
  getSemiFPList,
  setStockUpStatus,
  getCustomerList,
  getModelNumberList,
  getProductList,
  delFinishProduct,
  getStockUpList_exports,
  getWarehouseList,
} from "@/api/product/index";
export default {
  data() {
    return {
      activeName: "order",
      loading: true,
      isbeihuo: false,
      // 搜索

      ModelNumberLists: [],
      ModelNumberList: [],
      order_data: [],
      ser: {
        serial_number: "",
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
        warehouse_id: "",
        goods_shelf_id: "",
      },
      CustomerList: [],
      productList: [],

      dataList: [],
      pagination: {
        per_page: 10,
        page: 1,
      },
      total: 0,
      pagination_product: {
        per_page: 10,
        page: 1,
      },
      total_product: 0,
      goods_shelfList: [],
      WarehouseList: [],
      cangku: {
        id: "",
        warehouse_id: "",
        goods_shelf_id: "",
        is_stock_up: 2,
        customer_id: "",
      },
      SemiFPList: [],
    };
  },
  mounted() {
    this.getlist();

    this.getproduct();
    this.getModel();
    this.getCustomer();
    this.get_WarehouseList();
  },
  methods: {
    get_SemiFPList() {
      getSemiFPList().then((res) => {
        if (res.code == 200) {
          this.SemiFPList = res.data.data;
          this.total_product = res.data.total;
        }
      });
    },
    setup_change(tab, event) {
      console.log(tab, event);
      switch (tab.name) {
        case "product":
          this.get_SemiFPList();
          break;
        case "order":
          this.getlist();
          break;
      }
    },
    Warehouse_change(val) {
      console.log(val);
      this.WarehouseList.forEach((item) => {
        if (val == item.id) {
          this.goods_shelfList = item.children;
        }
      });
      console.log(this.goods_shelfList);
    },
    get_WarehouseList() {
      getWarehouseList().then((res) => {
        if (res.code == 200) {
          this.WarehouseList = res.data.data;
        }
      });
    },
    formatterTime(data) {
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)[0];
    },
    del_FinishProduct(id) {
      delFinishProduct({ finish_product_id: id }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功~");
          this.getlist();
        }
      });
    },
    chengpin_shanchu(id, num) {
      this.$confirm("您确定删除订单号为：" + num + "的订单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.del_FinishProduct(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 指定查询
    search(type) {
      if (type == 0) {
        this.pagination.per_page = 10;
        this.pagination.page = 1;
      }
      getStockUpList({ ...this.ser, ...this.pagination }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          if (type == 2) {
            if (res.data.data.length > 0) {
              this.$message.success("正在导出订单列表");
              this.exports_w();
            }
          }
        }
      });
    },
    // 导出
    exports_w() {
      let data = {
        ...this.ser,
        export: 1,
      };
      getStockUpList_exports(data).then((res) => {
        //创建一个隐藏的a连接，
        const link = document.createElement("a");
        let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });
        link.style.display = "none";
        //设置连接
        link.href = URL.createObjectURL(blob);
        link.download = "备货列表";
        document.body.appendChild(link);
        //模拟点击事件
        link.click();
      });
    },
    searchreset() {
      this.ser = {
        model_number_id: "",
        order_number: "",
        customer_id: "",
        product_id: "",
        order_date: "",
        is_replenishment: "",
        is_stock_up: "",
        start_time: "",
        end_time: "",
        warehouse_id: "",
        goods_shelf_id: "",
      };
      this.getlist();
    },
    //客户列表
    getCustomer() {
      getCustomerList({ per_page: 99999 }).then((res) => {
        if (res.code == 200) {
          this.CustomerList = res.data.data;
        }
      });
    },
    //产品列表
    getproduct() {
      getProductList().then((res) => {
        if (res.code == 200) {
          this.productList = res.data.data;
        }
      });
    },
    // 型号列表
    getModel() {
      getModelNumberList().then((res) => {
        if (res.code == 200) {
          this.ModelNumberLists = res.data.data;
        }
      });
    },
    order_data_change(val) {
      this.ser.start_time = val[0];
      this.ser.end_time = val[1];
    },
    product_id_change(val) {
      console.log(val);
      this.ser.model_number_id = "";
      this.get_producModel(val);
    },
    get_producModel(id) {
      getModelNumberList({
        product_id: id,
        field_list: "id,model_number",
        is_dropdown: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.ModelNumberList = res.data.data;
        }
      });
    },
    beihuos(row) {
      this.isbeihuo = true;
      this.cangku.id = row.id;

      // this.beihuolist.order_id= row.order_id
    },
    close_dialog() {
      this.beihuolist = {
        id: "",
        order_id: "",
        is_simple: 1,
        is_stock_up: 2,
        customer_id: "",
      };
    },
    push_sets() {
      if (this.cangku.customer_id == "") {
        this.$message.error("请选择客户");
        return false;
      }
      setStockUpStatus(this.cangku).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "操作成功",
          });
          this.isbeihuo = false;
          this.getlist();
        }
      });
    },
    // 获取成品库列表
    getlist() {
      getStockUpList({ ...this.pagination, ...this.ser }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagination.page = val;
      this.getlist();
    },
    prev() {
      this.pagination.page = this.pagination.page - 1;
      this.getlist();
    },
    next() {
      console.log("ss");
      this.pagination.page = this.pagination.page + 1;
      this.getlist();
    },

    handleSizeChange_product(val) {
      console.log(val);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange_product(val) {
      console.log(`当前页: ${val}`);
      this.pagination_product.page = val;
      this.get_SemiFPList();
    },
    prev_product() {
      this.pagination_product.page = this.pagination_product.page - 1;
      this.get_SemiFPList();
    },
    next_product() {
      console.log("ss");
      this.pagination_product.page = this.pagination_product.page + 1;
      this.get_SemiFPList();
    },
  },
};
</script>

<style scoped>
#printArea {
  width: 100%;
  margin: 0 auto;
}

#printArea > div {
  margin-top: 50px;
}

#printArea > div:first-child {
  margin-top: 0px;
}

#printArea table {
  width: 100%;
  border-collapse: collapse;
}

#printArea table th {
  color: white;
  height: 50px;
  line-height: 50px;
  font-size: 35px;
}

#printArea table {
  border: 1px solid #c5c5c5;
}

#printArea table td,
table th {
  border: 1px solid #c5c5c5;
  text-align: center;
  padding: 0;
  margin: 0;
}

#printArea table tr td {
  height: 35px;
  line-height: 35px;
}

#printArea table thead th {
  background-color: #f4615c;
}

#printArea table tr th,
table tr td {
  padding: 5px 12px;
}

@page {
  size: auto;
  /* auto is the initial value */
  margin: 3mm;
  /* this affects the margin in the printer settings */
}

.procedure {
  word-wrap: break-word;
}
</style>
